<template> 
  <el-drawer
    class="myProp" 
    :title="`$t('message.layout.configTitle')`"
    v-model="isDrawer"
    direction="rtl"
    isModal="false"
    destroy-on-close
    size="600px"
  >
    <template
      #header="{ close, titleId, titleClass }"
      v-if="curNode && curNode.type == 'start'"
    >
      {{ curNode.title }}
    </template>
    <template #header="{ close, titleId, titleClass }" v-else>
      <span
        @click="showTitleInput"
        v-show="!titleInputVisible"
        style="cursor: pointer"
      >
        {{ curNode.title }}
        <el-icon style="font-size: 1.5em"><ele-Edit /></el-icon>
      </span>
      <el-input
        ref="titleInput"
        size="small"
        v-model="curNode.title"
        placeholder="请输入节点标签"
        v-show="titleInputVisible"
        @blur="onTitleChange"
      ></el-input>
    </template>
    <el-tabs type="border-card" style="height: calc(100vh - 5px)">
      <el-tab-pane label="条件" v-if="curNode.type === 'condition'"
        ><condition-panel
          ref="conditionPanel"
          :fields="fields"
          :conditions="conditions"
          :data="curNode.condition"
      /></el-tab-pane>

      <el-tab-pane
        label="参与人设置"
        v-if="['approve', 'deal'].includes(curNode.type)"
        ><participant-panel
          ref="approvePanel"
          :fields="fields"
          :data="curNode.approve"
      /></el-tab-pane>
      <el-tab-pane
        label="表单权限"
        v-if="['approve', 'start', 'deal'].includes(curNode.type)"
        ><permission-panel
          ref="permissionPanel"
          :fields="fields"
          :data="curNode.permission"
      /></el-tab-pane>

      <el-tab-pane label="传阅" v-if="curNode.type === 'circulate'"
        ><circulate-panel
          ref="circulatePanel"
          :fields="fields"
          :data="curNode.circulate"
      /></el-tab-pane>
      <el-tab-pane label="操作设置"
        ><operation-panel
          ref="operationPanel"
          :data="curNode.operation"
        ></operation-panel>
      </el-tab-pane>
      <el-tab-pane label="说明">
        <div v-if="curNode.type === 'start'">每个流程只允许一个启动节点</div>
        <div v-else-if="curNode.type === 'end'">
          每个流程只允许一个结束节点；
          结束节点可以有一条或者多条入向连接，但没有出向连接。
        </div>
        <div v-else>这里是节点说明</div>
      </el-tab-pane>
      <!--<el-tab-pane label="操作权限"   
        ><operation ref="operationPanel"  :data="curNode.operation"
      /></el-tab-pane>-->

      <el-tab-pane label="通用" v-if="false">
        <el-select v-model="curNode.type">
          <el-option
            v-for="item in workflowTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.value }}</span
            ></el-option
          >
        </el-select>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts">
import PermissionPanel from "./Permission.vue";
import OperationPanel from "./Operation.vue";
import ParticipantPanel from "./Participant.vue";
import ConditionPanel from "./Condition.vue";
import CirculatePanel from "./Circulate.vue";

import { ClickOutside } from "element-plus";
export default {
  inject: ["titleChange"],
  directives: {
    ClickOutside,
  },
  components: {
    PermissionPanel,
    ParticipantPanel,
    ConditionPanel,
    CirculatePanel,
    OperationPanel,
  },
  props: {
    fields: { type: Array, default: () => {} },
    conditions: { type: Array, default: () => {} },
    node: { type: Object, default: () => {} },
  },
  data() {
    return {
      titleInputVisible: false,
      curNode: {},
      isDrawer: false,
      workflowTypes: [
        { label: "开始", value: "start" },
        { label: "结束", value: "end" },
        { label: "条件", value: "condition" },
        { label: "传阅", value: "circulate" },
        { label: "审批", value: "approver" },
      ],
    };
  },
  watch: {
    isDrawer(val) {
      if (val) {
        this.$nextTick(() => {
          this.curNode = JSON.parse(JSON.stringify(this.node));
        });
      } else {
        this.curNode = {};
      }
    },
  },
  methods: {
    showTitleInput() {
      this.titleInputVisible = true;
      this.$nextTick(() => this.$refs.titleInput.focus());
    },
    onTitleChange() {
      this.titleChange(this.curNode.title);
      this.titleInputVisible = false;
    },
    onConfirm() {
      this.node.approve = this.$refs["approvePanel"]?.onConfirm();

      this.node.permission = this.$refs["permissionPanel"]?.onConfirm();
      this.node.condition = this.$refs["conditionPanel"]?.onConfirm();
      this.node.circulate = this.$refs["circulatePanel"]?.onConfirm();
      this.node.operation = this.$refs["operationPanel"]?.onConfirm();
      console.log("  panel confirmed");
      this.close();
    },

    close() {
      this.isDrawer = false;
    },
    open() {
      this.isDrawer = true;

      this.$nextTick(() => {
        //document.getElementById('myProp').appendChild(document.getElementsByClassName('geFormatContainer')[0]);
      });
      // { "title": "leo", "id": "2", "type": "approve", "assigneeType": "role", "approve": { "ouCollection": { "user": [], "role": [ { "id": 340428577087557, "parentId": 336557508276293, "name": "IT", "code": "it", "type": 2, "sort": 2, "description": "", "tagName": "role", "tagType": "danger" } ], "org": [] }, "participants": [], "assigneeType": "role", "formOperates": [], "SignType": "string", "optionalMultiUser": false, "optionalRange": "ALL" }, "permission": [] }
      //JSON.parse(JSON.stringify(this.node))
      // this.isDrawer=false
    },
  },
};
</script>
<style lang="scss"     >
 
 .el-drawer {
  --el-drawer-padding-primary: unset !important;
  .el-drawer__header {
    padding: 0 15px !important;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
    color: var(--el-text-color-primary);
  }
  .el-drawer__body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
</style>